<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->
    <!-- Bootstrap css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <!-- kendo ui css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.common.min.css"
        rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.default.min.css"
        rel="stylesheet">
    <!-- font-awesome -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/fontawesome/css/font-awesome.css" rel="stylesheet">
    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk_pack.css" rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
    <!-- 包括所有kendoui的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/js/kendo.all.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>
    <!-- 数据埋点统计 -->
    <script src="http://magicbox.bk.tencent.com/static_api/analysis.js"></script>
    <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
    <!--[if lt IE 9]><script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/html5shiv.min.js"></script><script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/respond.min.js"></script><![endif]-->
</head>

<body class="bg-white" data-bg-color="bg-white">
    <div class="king-page-box">
        <div class="king-container clearfix">
            <nav class="">
                <div style="overflow:hidden; z-index: inherit;" class="navbar king-horizontal-nav1  f14">
                    <div class="navbar-container">
                        <div class="navbar-header pull-left">
                            <a class="navbar-brand" href="javascript:;">
                                <img src="https://magicbox.bk.tencent.com/static_api/v3/bk/images/logo.png" class="logo">
                            </a>
                        </div>
                        <ul class="nav navbar-nav pull-left m0">
                            <li class="active"><a href="${SITE_URL}host_status/">首页</a></li>
                            <li><a href="${SITE_URL}host_status/host_status/">主机状态</a></li>
                            <li><a href="${SITE_URL}host_status/operate_history/">操作记录</a></li>
                        </ul>
                        <div class="navbar-header pull-right">
                            <ul class="nav">
                                <li class="user-info">
                                    <a href="javascript:;">
                                        <img class="img-rounded" src="https://magicbox.bk.tencent.com/static_api/v3/components/horizontal_nav1/images/avatar.png">
                                        <span>admin</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
            <div class="panel panel-default mb0">
                <div class="panel-heading"> 业务主机 </div>
                <div class="panel-body">
                    <form class="form-horizontal">
                        <div class="form-group clearfix ">
                            <label class="col-sm-3 control-label bk-lh30 pt0">选择业务：</label>
                            <div class="col-sm-9">
                                <select name="" id="biz_id" class="form-control bk-valign-top">

                                </select>
                            </div>
                        </div>
                        <div class="form-group clearfix ">
                            <label class="col-sm-3 control-label bk-lh30 pt0">主机IP：</label>
                            <div class="col-sm-9">
                                <select name="" id="ip" class="form-control bk-valign-top">
                                </select>
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <div class="col-sm-9 col-sm-offset-3">
                                <button type="button" class="king-btn mr10  king-success" onclick="search(this)">查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="panel panel-default mb0">
                <div class="panel-heading"> 主机近期状态 </div>
                <div class="panel-body">
                    <div style="height: 300px; -webkit-tap-highlight-color: transparent; user-select: none; background-color: rgba(0, 0, 0, 0); cursor: default;"
                        id="chart_1538834715213" class="king-chart-box chart-area " _echarts_instance_="1538833285262"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 下拉框模板 -->
    <template id="app_tpl">
        <option value="#id#">#name#</option>
    </template>

    <template id="ip_tpl">
        <option value="#ip#">#ip#</option>
    </template>
    <!-- 设置面板End -->
    <script>
        function createEStandLineChart(conf) {
            var myChart = echarts.init(document.getElementById(conf.selector));
            var legendData = []
            for (var i = 0; i < conf.data.series.length; i++) {
                legendData.push(conf.data.series[i].name)
            }
            myChart.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    y: 'bottom',
                    data: legendData
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['bar', 'line'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: conf.data.xAxis
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitArea: { show: true }
                    }
                ],
                series: conf.data.series
            });
        }
        function initEStandLineChart(conf) {
            $.ajax({
                url: conf.url,
                type: 'GET',
                dataType: conf.dataType,
                success: function (res) {
                    //获取数据成功
                    if (res.result) {
                        createEStandLineChart({
                            selector: conf.containerId, // 图表容器
                            data: res.data, // 图表数据
                        });
                    }
                }
            })
        }
    </script>
    <script>
        $(function () {
            ipaddr = $('#ip').val();
            initEStandLineChart({
                url: '${SITE_URL}host_status/get_hs/?ip=172.50.18.25',
                dataType: 'json',
                containerId: 'chart_1538834715213'
            });
        });
    </script>
    <script>
        function renderTpl(str, cfg) {
            var re = /(#(.+?)#)/g;

            return str.replace(re, function () {
                var val = cfg[arguments[2]] + '';
                if (typeof val == 'undefined') {
                    val = '';
                }
                return val;
            });
        }


        $(function () {
            /*
            * 查询表单级联数据拉取
            */
            $.get('${SITE_URL}host_status/get_biz_list/', function (data) {
                if (data.result) {
                    var _html = '';
                    var list = data.data;
                    var tpl = $('#app_tpl').html();
                    for (var i = 0, len = list.length; i < len; i++) {
                        var item = list[i];
                        _html += renderTpl(tpl, item)
                    }
                    $('#biz_id').html(_html);

                    var biz_id = $("#biz_id").val();
                    select_ip(biz_id);
                } else {
                    alert("获取失败")
                }
            }, 'json')

        })

        /*
        * 查询表单级联数据拉取
        */
        function select_ip(biz_id) {
            //级联选择ip
            $('#ip').html('');
            $.get('${SITE_URL}host_status/get_ip_by_bizid/', { 'biz_id': biz_id }, function (data) {
                if (data.result) {
                    var _html = '';
                    var list = data.data;
                    var tpl = $('#ip_tpl').html();
                    for (var i = 0, len = list.length; i < len; i++) {
                        var item = list[i];
                        _html += renderTpl(tpl, item)
                    }
                    $('#ip').html(_html);
                } else {
                    alert("获取失败")
                }
            }, 'json')
        }
    </script>
</body>

</html>